A UserControl is a separate, reusable part of a page. You can put a piece of a page in UserControl, and then use it again from a different location. The name, user control, may seem a bit fancy, but in reality, it's like a regular page, in which there is an alternative codebahind file. The notable difference is that UserControls can be included on many pages, while there can be no page. UserControls are used much like regular server controls, and they can be declaratively added to a page, such as server control
One major benefit of UserControl is that it can be cached, using the output cache functionality described in the previous chapter, so instead of caching the whole page, you can only cache user control, so that the rest of the page still Reload on every request
An example where a user control can come in handy, is a control to show information about a certain user on a community website. In the next few chapters, we will create a user control scroll from scratch, fit it for our purpose, and then use it on any page.
Creating a UserControl
OK, so we will create user controls to display information about a community user. First of all, we add user controls to our project. In your visual studio, you can right-click on your project and select Add new item. A dialogue will pop up, and you have to add web user controls to the list of possible things. Let's call our UserControl UserInfoBoxControl, with the UserInfoBoxControl.ascx file name. Make sure that you have checked the checkbox, which is the code in a separate file and the so-called codebind file.
You now have a user Infobox control. Casux and user Infobox control first, where we have put our markup, and the other is our code-bound file. Now, if UserInfoBoxControl.ascx is already open and is not selected, then do so. You will see only a line of code, as the User Control Declaration, as mentioned, this control will display information about the user, so we start adding some markup to do this:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserInfoBoxControl.ascx.cs" Inherits="UserInfoBoxControl" %>
<b>Information about <%= this.UserName %></b>
<br /><br />
<%= this.UserName %> is <%= this.UserAge %> years old and lives in <%= this.UserCountry %>
As you can see, all this is very basic. We have an announcement, some standard tags, some text, and then we have some types of variables now, where have they come from? Well, now, they do not come anywhere, because we have not declared them yet. We remove it properly, open the CodeBehind file for UserControl, which ends on .cs
As you can see, it looks like a CodeBehind file for a regular page, except that it gets from UserControl instead of the page, we will declare the tree properties used in our markup, Will give the basis.
private string userName;
private int userAge;
private string userCountry;
public string UserName
{
get { return userName; }
set { userName = value; }
}
public int UserAge
{
get { return userAge; }
set { userAge = value; }
}
public string UserCountry
{
get { return userCountry; }
set { userCountry = value; }
}
It's all very simple and works just like a regular class. You can even add methods, if you feel like it! Our UserControl is actually done now, but as you may have already experienced, we can't use it yet. A UserControl can't be displayed directly in the browser - it has to be included on a page. We will do that in the next chapter.